import _ from 'lodash';
import { getSiteChangeRecordDetail } from '@api/asset';
import { message } from 'antd';
import moment from 'moment';
import cn from 'classnames';
import RecordDetailSvg from '@containers/asset-manage/components/asset-content/images/record-detail.svg';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const renderAttr = [
  'ports',
  'assetCategories',
  'os',
  'titles',
  'wafs',
  'siteName',
  'tagName',
  'ip',
  'url',
  'customizeAttr',
  'servers',
  'components'
];

function SiteChangeRecord({ record, setTaskResultDetail }) {
  const targetInfoOids = _.get(record, 'targetInfoOids', []);

  const _loadTaskResultDetail = () => {
    if (_.isEmpty(targetInfoOids)) {
      return;
    }
    getSiteChangeRecordDetail(_.get(record, '_id'))
      .then(res => {
        let detail = {};
        detail.list = _.get(res, 'data.data.detail.targetInfos', []);
        detail.record = record;
        setTaskResultDetail(detail, record);
      })
      .catch(() => {
        message.error('加载详情失败!');
      });
  };
  const created = _.get(record, 'created');
  const renderRecord = _.pick(record, renderAttr);
  const customizeAttr = _.get(renderRecord, 'customizeAttr') || [];
  customizeAttr.forEach(attr => {
    const { label } = attr;
    renderRecord[label] = attr;
  });
  return (
    <div className="site-change-record">
      <div className="change-time">
        <span className="time">
          {created ? moment(created).format('YYYY-MM-DD HH:mm:ss') : '-'} 更新
        </span>
        <a
          className={cn('view-detail', { 'view-detail-disable': _.isEmpty(targetInfoOids) })}
          onClick={_loadTaskResultDetail}
        >
          查看详情
          <img src={RecordDetailSvg} alt="" />
        </a>
      </div>
      <div className="detail">
        {Object.keys(renderRecord).map((key, index) => {
          const detail = renderRecord[key];
          if (!detail.label) {
            return;
          }
          return (
            <div className="item" key={index}>
              <label className="label">{detail.label}：</label>
              <span className="value">
                {!_.isEmpty(detail.newAdd) && (
                  <>
                    新增了&nbsp;<span className="new-add">{detail.newAdd.join('、')}</span>&nbsp;;
                  </>
                )}
                {!_.isEmpty(detail.remove) && (
                  <>
                    关闭了&nbsp;<span className="remove">{detail.remove.join('、')}</span>&nbsp;;
                  </>
                )}
                {!_.isEmpty(detail.update) &&
                  _.map(detail.update, ({ from, to }, index) => (
                    <Fragment key={index}>
                      &nbsp;
                      <span className="update-from">
                        {!_.isEmpty(from) ? from.join('、') : '未知'}
                      </span>
                      &nbsp;变更为&nbsp;
                      <span className="update-to">{!_.isEmpty(to) ? to.join('、') : '未知'}</span>
                      &nbsp;;
                    </Fragment>
                  ))}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

SiteChangeRecord.propTypes = {
  record: PropTypes.object,
  setTaskResultDetail: PropTypes.func
};

export default SiteChangeRecord;
